/**
 * Created by tanbingqin on 2020/7/16.
 */
import React, { Component, PropTypes } from "react";
import { messages, queryCurrencyPrecision } from 'share/common'
import { connect } from 'react-redux';
import { Button, Row, Col, Icon, message, Spin, Table, Tag, Popover, InputNumber } from 'antd'
import customField from 'share/customField'
import 'styles/request/new-request/expense-type-detail.scss'
import SubsidyDetail from 'containers/request/slide/content/subsidy-detail'
import Condition from 'components/condition';
const If = Condition.If;

class RequestItineraryBudgetShow extends Component{
  constructor(props) {
    super(props);
    this.state = {
      fields: [],
      expenseApportionColumns: [
        {title: messages('request-1.key277')/*分摊项*/, dataIndex: 'costCenterItems', render: (value, record, tableIndex) => {
          return (
            <div>
              {record.budgetLabelCode === 'BUD_002' && <Tag color="red">{messages('request-1.key278')/*超预算*/}</Tag>}
              {record.budgetLabelCode === 'BUD_003' && <Tag color="blue">{messages('request-1.key279')/*预算预警*/}</Tag>}
              {
                value.map((oneApportion, index) => {
                  return (
                    <div key={index}>
                      <Row type="flex" align="middle" style={{marginBottom: 5}}>
                        <Col span={4} className="expense-apportion-name"><Popover content={oneApportion.fieldName}>{oneApportion.fieldName}:</Popover></Col>
                        <Col span={20} className="expense-apportion-content">
                          <Popover placement="topLeft" content={<div style={{maxWidth: 500}}>{oneApportion.name}</div>}>{oneApportion.name}</Popover>
                        </Col>
                      </Row>
                    </div>
                  )
                })
              }
            </div>
          );
        }},
        {title: messages('request-1.key280')/*分摊金额*/, dataIndex: 'amount', width: '15%', render: (value, record, tableIndex) => {
          return (
            <InputNumber
              size="small"
              min={0}
              step={1}
              precision={queryCurrencyPrecision(props.params.budget.currencyCode)}
              disabled={true}
              value={value}
              style={{width:'100%'}}
            />
          )
        }},
        {title: messages('request-1.key281')/*分摊比例%*/, dataIndex: 'scale', width: '15%', render: (value, record, tableIndex) => {
          return (
            <InputNumber
              size="small"
              min={0}
              step={1}
              disabled={true}
              value={value}
              style={{width:'100%'}}
            />
          )
        }}
      ]
    };
  }

  componentDidMount() {
    const { budget, applicant } = this.props.params;
    let fields = customField.renderFields(budget.expenseBudgetCustomValueDTOs, {}, applicant, 'budgetShow', '', true);
    this.setState({fields});
  }

  onCancel = () => {
    this.props.close();
  };

  render() {
    const { fields, expenseApportionColumns } = this.state;
    const { budget } = this.props.params;
    return (
      <div className="expense-type-detail">
        <Row type="flex" align="middle" style={{marginBottom: 12}}>
          <img src={budget.expenseTypeIconURL} style={{width: 28, height: 28, marginRight: 16}}/>
          <span style={{fontSize: '18px', color: '#1E2126'}}>{budget.expenseTypeName}</span>
        </Row>
        <If value={budget.travelSubsidiesRequestItemDetailDTOs && budget.travelSubsidiesRequestItemDetailDTOs.length}>
          <SubsidyDetail
            subsidyInfo={budget}
            disabled
          />
        </If>
        {fields && !!fields.length && fields.map(item => {
          return (
            <Row style={{marginBottom: 12, lineHeight: '31px'}} type="flex" align="top">
              <span style={{display: 'inline-block', width: '140px', marginRight: 12}}>
                {item.messageKey !== 'com_prompt_text' && (
                  <span>{item.name}{item.name && ' : '}</span>
                )}
              </span>
              <span style={{display: 'inline-block', width: 'calc(100% - 152px)'}}>
                {item.content}
              </span>
            </Row>
          )
        })}
        <div className="expense-type-container">
          {budget.apportionmentDTOList && budget.apportionmentDTOList.length && (
            <Table
              rowKey={(record, index) => index}
              columns={expenseApportionColumns}
              dataSource={budget.apportionmentDTOList}
              pagination={false}
              style={{width:'100%'}}
              bordered
              size="small"
            />
          )}
        </div>
        <div className="slide-footer">
          <Button onClick={this.onCancel}>{messages('common.back')/*返回*/}</Button>
        </div>
      </div>
    )
  }
}

RequestItineraryBudgetShow.propTypes = {

};

function mapStateToProps(state) {
  return {
    user: state.login.user,
    company: state.login.company,
    newProfile: state.login.options
  }
}

export default connect(mapStateToProps)(RequestItineraryBudgetShow);
